<template>
  <go-back />
  <div class="header">
    <p class="title">{{ title }}</p>
    <img class="picture" src="../../../assets/img.png" />
  </div>
  <p class="time">填写时间：{{ time }}</p>
  <a-list item-layout="horizontal" :data-source="data">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta>
          <template #title>
            <p class="question">问题：{{ item.question_title }}</p>
            <p class="answer">答案：{{ item.answer_content }}</p>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>

<script lang="ts">
import { createVNode, defineComponent, Ref, ref, toRaw, reactive, onMounted, watch } from 'vue'
import QuestionsItem from '../../../components/questionSetting.vue'
import GoBack from '../../../components/goback.vue'
import { useRouter, useRoute } from 'vue-router'
import { Modal, message } from 'ant-design-vue'
import { detele, get, put } from '../../../utils/request/request'
import PaperTop from '../../../components/paperTop.vue'

interface PaperData {
  title: string
  user_name: string
  user_class: string
  answer_time: string
  questions: {
    number: number | undefined
    is_require: boolean
    question_type: number
    question_title: string
    answer_content: string[] | never[]
  }[]
}

interface QuestionsItems {
  number: number | undefined
  is_require: boolean
  question_type: number
  question_title: string
  answer_content: string[] | never[]
}

const paper: Ref<PaperData[]> = ref([])
const data: Ref<QuestionsItems[]> = ref([])
const title: Ref<string> = ref('标题')
const time: Ref<string> = ref('填写时间')

// 网络请求逻辑
const useHttpRequestEffect = (token: string, id: string, paper_id: string) => {
  const router = useRouter()
  const getData = async () => {
    const getRes: any = await get(`/admin/api/v1/paper/${paper_id}/answers?user=${id}`, token)
    if (getRes.code === 0) {
      paper.value = getRes.data
      data.value = getRes.data.answers
      title.value = getRes.data.title
      time.value = getRes.data.answer_time
      console.log(getRes.data.answers)
    } else {
      message.error(getRes.status_msg)
      setTimeout(() => {
        router.push({ name: 'userPaperList' })
      }, 1000)
    }
  }

  return { getData }
}

// PaperTop子组件调用父组件方法
const useChangeEffect = (paper: PaperData) => {
  const changeTitle = (title: string) => {
    paper.title = title
  }

  return {
    changeTitle
  }
}

export default defineComponent({
  components: {
    QuestionsItem,
    GoBack,
    PaperTop
  },
  setup() {
    const route = useRoute()
    const id = route.params.id as string
    const paper_id = route.params.paper_id as string
    const token = localStorage.getItem('token') as string
    const { getData } = useHttpRequestEffect(token, id, paper_id)

    onMounted(() => {
      getData()
      console.log(paper)
    })

    return {
      paper,
      data,
      title,
      time
    }
  }
})
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 85px;
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: rgb(13, 102, 206);
}
.title {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  margin: 1.7%;
  margin-left: 6%;
  letter-spacing: 20px;
}
.picture {
  width: 10%;
  position: relative;
  left: 87%;
  bottom: 90%;
  background-color: #4c63e9;
}
.question {
  font-family: SourceHanSansCN-Medium;
  font-size: 24px;
  font-weight: 500;
}
.answer {
  font-family: SourceHanSansCN-Medium;
  font-size: 24px;
  font-weight: 200;
}
.time{
    font-family: SourceHanSansCN-Medium;
  font-size: 15px;
  font-weight: 200;
}
</style>
